<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .layui-table tr{
            height: 52px;
        }
        .layui-table-cell{
            height: 52px;
        }

        .upload-item,.edit-item {
            position: relative;
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .upload-img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .upload-input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        .upload-item input[type="checkbox"],.edit-item input[type="checkbox"] {
            position: absolute;
            bottom: 5px;
            right: 5px;
        }
        .upload-item .delete-btn ,.edit-item .delete-btn{
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(255,255,255,0.7);
            border: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            color: #ff0000;
            font-weight: bold;
        }
        .layui-btn-sm {
            padding: 1px ;
            font-size: 12px;
        }

    </style>
</head>
<body>
<!--数据列表-->
<table class="layui-table" lay-data="{url:'orders/list', page:true, id:'datalist',toolbar:'#toptools'}" lay-filter="datalist">
    <thead>
    <tr>
        <th lay-data="{field:'id',}">ID</th>
        <th lay-data="{field:'userid'}">用户ID</th>
        <th lay-data="{field:'money'}">价格</th>
        <th lay-data="{field:'code'}">订单号</th>
        <th lay-data="{templet:'#parentTpl'}">状态</th>
        <th lay-data="{toolbar:'#linetools'}">操作</th>
    </tr>
    </thead>
</table>
<!--父级分类自定义模板-->
<script type="text/html" id="parentTpl">
    {{# console.log(d);
    switch(d.state) {
    case -1:
    }}
    <span style="color: red;">订单失效</span>
    {{#
    break;
    case 0:
    }}
    <span style="color: orange;">订单未支付</span>
    {{#
    break;
    case 1:
    }}
    <button type="button" class="layui-btn-sm layui-btn-radius " lay-event="putOn" >待发货</button>
    {{#
    break;
    case 2:
    }}
    <span style="color: green;">订单已发货</span>
    {{#
    break;
    case 3:
    }}
    <button type="button" class="layui-btn-sm layui-btn-radius " lay-event="end" >订单确认完成</button>
    {{#
    break;
    default:
    }}
    <span style="">未知状态</span>
    {{#
    }
    }}
</script>

<!--信息对话框-->
<div style="display:none" id="editWin" lay-filter="editWin" class="layui-form">
    <input name="id" type="hidden">
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline">
            <textarea type="text" name="address" required lay-verify="required"  autocomplete="off" class="layui-input" ></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <textarea type="text" name="phone" required lay-verify="required"  autocomplete="off" class="layui-input" ></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">收货人设定地址</label>
        <div class="layui-input-inline">
            <textarea type="text" name="name" required lay-verify="required"  autocomplete="off" class="layui-input"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">具体信息：</label>
        <div class="layui-input-inline">
            <textarea type="text" name="msg" required lay-verify="required"  autocomplete="off" class="layui-input"></textarea>
        </div>
    </div>
</div>

<!--行内工具栏-->
<script id="linetools" type="text/html">
    <button  type="button"  class="layui-btn-sm layui-btn-radius " lay-event="edit" >查看</button>
    <button type="button"  class="layui-btn-sm layui-btn-radius " lay-event="delete">删除</button>
</script>


<!--头部工具栏-->
<script id="toptools" type="text/html">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" name="text"  placeholder="请输入查询内容" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="button"  class="layui-btn layui-btn-radius" lay-event="check">查询</button>
        </div>
    </div>
</script>
<script src="layui/layui.all.js"></script>
<script>
    // 从 layui 中引入 jQuery 对象，方便后续使用 jQuery 相关方法操作 DOM
    const $ = layui.$;
    // 从 layui 中引入表格模块，用于处理表格相关操作，如表格数据加载、刷新等
    const table = layui.table;
    // 从 layui 中引入表单模块，用于处理表单数据的获取、验证、填充等操作
    const form = layui.form;
    // 从 layui 中引入弹出层模块，用于创建各种类型的弹出层，如确认框、提示框等
    const layer = layui.layer;
    // 从 layui 中引入文件上传模块，用于处理文件上传功能
    const upload = layui.upload;

    /* 监听表格行内按钮的点击事件，tool是预定义的，当点击带有 lay-event 属性的按钮时触发 */
    table.on("tool(datalist)", function (obj) {
        // 获取被点击按钮的 lay-event 属性值，用于判断点击的是哪个按钮
        var event = obj.event;
        // 获取被点击按钮所在行的数据，包含该行的所有字段信息
        var data = obj.data;
        // 判断点击的按钮是否为删除按钮
        if (event === 'delete') {
            // 弹出确认框，防止用户误操作，询问用户是否确认删除
            layer.confirm("确认要删除吗?", function () {
                // 当用户点击确认后，执行以下代码
                $.ajax({
                    // 发送删除请求的 URL，这里是删除分类的接口
                    url: 'orders/delete',
                    // 发送的数据，包含要删除的分类的 ID
                    data: { orderid: data.id },
                    // 请求成功后的回调函数
                    success: function () {
                        // 弹出提示信息，告知用户删除成功，显示 1800 毫秒，图标为 1 表示成功
                        layer.msg("删除成功", { time: 1800, icon: 1 });
                        // 刷新表格数据，并将表格显示到第一页
                        table.reload("datalist", { page: { curr: 1 } });
                    }
                });
            });
        }
        //查看明细
        else if (event === 'edit') {
            $.ajax({
                // 发送删除请求的 URL，这里是删除分类的接口
                url: 'orders/getaddress',
                // 发送的数据，包含要删除的分类的 ID
                data: { orderid: data.id },
                // 请求成功后的回调函数
                success: function (result) {
                    form.val("editWin",result.data);
                    form.val("editWin",result);
                    //回显图片
                    layer.open({
                        type:1,
                        title:'详情',
                        area:['400px','400px'],
                        content:$("#editWin")
                    });

                }
            });
        }else if (event === 'putOn') {
            layer.confirm("确认要发货吗", function () {
                $.ajax({
                    url: 'orders/putOn',
                    data: { orderid: data.id },
                    success: function () {

                        layer.msg("发货成功", { time: 1800, icon: 1 });
                        table.reload("datalist");
                    }
                });
            });
        }else if (event === 'end') {
            layer.confirm("确认结束订单吗", function () {
                $.ajax({
                    url: 'orders/end',
                    data: { orderid: data.id },
                    success: function () {
                        layer.msg("结束成功", { time: 1800, icon: 1 });
                        table.reload("datalist");
                    }
                });
            });
        }
    });
    /* 监听表格头部工具栏按钮的点击事件，当点击带有 lay-event 属性的按钮时触发 */
    table.on("toolbar(datalist)", function (obj) {
        // 获取被点击按钮的 lay-event 属性值，用于判断点击的是哪个按钮
        var event = obj.event;
        // 判断点击的按钮是否为查询按钮
        if (event === 'check') {
            // 获取输入框中的查询内容
            var text = $("[name='text']").val();
            // 重新加载表格数据，将查询内容作为参数传递给后端，并将表格显示到第一页
            table.reload("datalist", { where: { 'text': text }, page: { curr: 1 } });
            // 将输入框中的查询内容重新赋值，确保输入框内容不变
            $("[name='text']").val(text);
        }
    });
</script>
</body>
</html>